<template>
    <div class="container">
        <Header title="重置密码"></Header>
        <div class="register">
            <h3>重置密码</h3>
            <ul class="register-list">
                <li>
                    <div class="register-list-row">
                        <label class="register-row-title"><span style="color:#ff4949">*</span>账号</label>
                        <div class="register-row-content">
                            <input  :readonly="readonlyFlag" placeholder="请输入手机号" v-model="phone" type="text" maxlength="11">
                            <i class="fa fa-times-circle "></i>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="register-list-row">
                        <label class="register-row-title"><span style="color:#ff4949">*</span>验证码</label>
                        <div class="register-row-content">
                            <input type="text" placeholder="请输入验证码" v-model="code">
                            <i class="fa fa-times-circle "></i>
                        </div>
                        <button  :class="codeDis ? 'verificationing':'verification'" v-bind:disabled="codeDis" @click="sendVerificationCode">{{verificationCode}}</button>
                    </div>
                </li>
            </ul>
            <div style="text-align: center;margin-top: 20px;" >
            	<button class="verification" v-if="isShow" style="position: relative; width:90px;height: 44px;font-size:15px;" @click="resetPwd()">确定</button>
            	<router-link :to="{ path: '/login'}"><button class="verification" style="position: relative;width:90px;height: 44px;font-size: 15px;margin-left: 40px;">取消</button></router-link>
            </div>
        </div>
    </div>
</template>
<script>
	import { MessageBox, Toast } from 'mint-ui';
    export default{
    	components:{
			MessageBox
		},
        data(){
            return {
                verificationCode:'发送验证码',
                timer:0,
                codeDis : false,
                accountName:'',
                code:'',//验证码
                phone:'',//手机号
                companyCode:'',//公司代码
                isShow:true,
                readonlyFlag:false
            }
        },
        watch:{
        	phone:function(newVal,oldVal){
        		var _self = this;
        		var reg = /^[0-9]*$/;
        		if(!reg.test(newVal)){
        			_self.phone = oldVal;
        		}
        		if(newVal==window.sessionStorage.getItem(_self.utilHelper.appAssistant+"_phone")){
        			_self.readonlyFlag = true;
        		}
        	}
        },
        mounted: function() {
            //初始化数据
         //   this.verificationCodeTimer(true);
        },
        activated:function(){
            //初始化数据
        //    this.verificationCodeTimer(true);
        },
        methods:{
            //发送验证码
            sendVerificationCode:function(){
                var _self = this;
                //验证手机号
                if(!_self.phone){
                    Toast({
                    	message:'请填写手机号',
                    	position:'middle'
                    });
                    return;
                }
                if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone))){
                    Toast({
                    	message:'手机号码格式错误',
                    	position:'middle'
                    });
                    return;
                }
                //设置不能点击
                _self.codeDis = "disabled";
                //设置号码不能编辑
                _self.readonlyFlag = true;
                //将手机号码放入缓存中
                window.sessionStorage.setItem(_self.utilHelper.appAssistant+"_phone",_self.phone);
                var body = {};
                body.params = {
                    phone:_self.phone
                };
              //  layer.msg("短信发送成功，请注意查收");
                var url = this.utilHelper.apiUrl+'/api/sendValidateCodeForPwd';
                _self.$http.post(url,body).then((response) => {
                    var data = response.body.resData;
                    if(data.result == 1){
                    	  Toast({
	                    	message:'短信发送成功，请注意查收'
	                  	  });
                        _self.verificationCodeTimer(false);
                    }else{
                    	Toast(data.resultMsg);
		                //设置能点击
		                _self.codeDis =false;
		                //设置号码能编辑
		                _self.readonlyFlag = false;
                    }
                }),(response => {
                	Toast("发送短信异常");
                	//设置能点击
	                _self.codeDis =false;
	                //设置号码能编辑
	                _self.readonlyFlag = false;
                });
            },
            //短信验证码定时器
            verificationCodeTimer:function(flag){
                var _self = this;
                var date = 0;
                if(flag){//页面刷新，或重进入时
                    if(window.sessionStorage.getItem(_self.utilHelper.appAssistant+"_verification")){//若缓存中不存在数据则 不进行倒计时
                        date =  window.sessionStorage.getItem(_self.utilHelper.appAssistant+"_verification");
                    }else{
                        return;
                    }
                    if(window.sessionStorage.getItem(_self.utilHelper.appAssistant+"_phone")){//若缓存中存在手机号时，对手机号进行赋值
                    	_self.phone = window.sessionStorage.getItem(_self.utilHelper.appAssistant+"_phone");
                    	_self.readonlyFlag = true;
                    }
                }else{//点击发送按钮时
                    date = new Date().getTime() +1000*180;
                    window.sessionStorage.setItem(_self.utilHelper.appAssistant+"_verification",date);
                    _self.timer = 180;
                }

                _self.codeDis = "disabled";
                var code = setInterval(function(){
                    _self.timer = Math.ceil((date - new Date().getTime())/1000);//向上取整数
                    if(_self.timer <= 0 ){
                        window.sessionStorage.removeItem(_self.utilHelper.appAssistant+"_verification");
                        _self.verificationCode = '发送验证码';
                        _self.codeDis = false;
                        _self.readonlyFlag = false;
                        window.clearInterval(code);
                    }else{
                        _self.verificationCode = _self.timer + 'S';
                        _self.timer-=1;
                    }
                },1000);
            },
            //重置密码
            resetPwd:function(){
                var _self = this;
                if(_self.vaild()){
                	_self.isShow = false;//隐藏确定按钮
                var body = {};
                body.params = {
                    phone:_self.phone,
                    code:_self.code
                }
                var url = _self.utilHelper.apiUrl+'/api/resetPwd';
                _self.$http.post(url,body).then((response) => {
                    var body = response.body;
                    if(body.result == 1){
                    //	Toast(body.resData);
                        //页面跳转
                        //清空倒计时
                        window.sessionStorage.removeItem(_self.utilHelper.appAssistant+"_verification");
                        window.sessionStorage.removeItem(_self.utilHelper.appAssistant+"_phone");
                       layer.open({
						    content: body.resData.resultMsg
						    ,btn: '确定'
						    ,btn1:function(){
						    	layer.closeAll();
                                _self.$router.replace({path:'/login'});
						    }
						 });
						// alert("密码重置成功，密码已重置为：x1234567");
						// _self.$router.replace({path:'/login'});
                        /*layer.alert("密码重置成功，密码已重置为：x1234567",{
                        	btn:['确定'],
                        	btn1:function(){
                        		layer.closeAll();
                        		_self.$router.replace({path:'/login'});
                        	}
                        })*/
                    }else{
                    	//layer.alert("验证码错误");
                    	 _self.isShow = true;
                    	Toast({
	                        message:body.resultMsg,
	                        position:'middle'
                    	});
                    }
                }),(response => {
                    layer.msg("注册异常");
                    _self.isShow = true;
                })
                	
                }
                
            },
            vaild: function () {
                var _self = this;
                if (!_self.phone) {
                    layer.msg("请输入手机号", {
                        time: 2000
                    });
                    return false;
                }
                if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.phone))){
                    layer.msg("手机号码格式错误", {
                        time: 2000
                    });
                    return false;
                }
                if (!_self.code) {
                    layer.msg("请输入验证码", {
                        time: 2000
                    });
                    return false;
                }
                return true;
            }
        }
    }
</script>
<style scoped>
    .register{padding: 130px 20px 50px;height: 100%;}
    .register h3{text-align: center;font-size: 20px;margin-bottom: 80px;}
    .register-list li{border-bottom: 1px solid #ccc;padding: 6px 0 6px 16px;margin-bottom: 20px;}
    .register-list-row{position: relative;padding-left: 90px;padding-right:70px;height: 24px;line-height: 24px;}
    .register-row-title{position: absolute;left: 0;top: 0;width: 80px;color: #333;font-size: 16px;text-align: right;}
    .register-row-content{position: relative;}
    .register-row-content input{height: 24px;font-size: 14px;background-color: #f2f2f2;outline: none;padding-right: 30px;}
    .register-row-content .fa{position: absolute;right: 6px;top: 2px;font-size: 20px;color: #999;display: none;z-index: 1;}
    .register-row-content .fa-exclamation-circle{color: #bf0000;}
    .verification{position: absolute;right: 0;top: 0;width: 70px;height:24px;color: #333;font-size: 12px;text-align: right;background-color: #ff8b22; color: #fff;  text-align: center;  border-radius: 4px;}
    .verificationing{position: absolute;right: 0;top: 0;width: 70px;height:24px;color: #333;font-size: 12px;text-align: right;color: #ff8b22; background-color:#cacaca; text-align: center;  border-radius: 4px;}
    .btn-register{display: block;width: 100%;padding:12px 0;border:1px solid #ff7900;background-color: #f3ece6;color: #ff7900;margin-top: 50px; }
</style>
